<template>
  <div style="float: left">
    <el-row class="row-bg">
      <el-col :span="6">
        <el-button type="primary" @click="onSwitch">机器开关</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="onSurface">查询图表</el-button>
      </el-col>
    </el-row>
    <el-form label-position="right" label-width="100px" style="max-width: 460px;" fit="true">
      <el-form-item label="机器IP">
        <el-input v-model="machineInfo.localIp" placeholder="Please input" />
      </el-form-item>
      <el-form-item label="机器状态">
        <el-col :span="14">
          <el-input v-model="machineInfo.state" placeholder="Please input" />
        </el-col>
        <el-col :span="10">
          <el-button type="info" @click="getMachineInfoLog(1)">查询机器状态日志</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="机器端口">
        <el-input v-model="machineInfo.localPort" placeholder="Please input" />
      </el-form-item>
      <el-form-item label="电池电压">
        <el-col :span="14">
          <el-input v-model="machineInfo.cellVoltage" placeholder="Please input" />
        </el-col>
        <el-col :span="10">
          <el-button type="info" @click="getMachineInfoLog(2)">查询电池电压日志</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="设备RFID">
        <el-input v-model="machineInfo.cellRfid" placeholder="Please input" />
      </el-form-item>
      <el-form-item label="速度">
        <el-col :span="14">
          <el-input v-model="machineInfo.speed" placeholder="Please input" />
        </el-col>
        <el-col :span="10">
          <el-button type="info" @click="getMachineInfoLog(3)">查询机器速度日志</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="夜间照明">
        <el-col :span="14">
          <el-input v-model="machineInfo.nightLight" placeholder="Please input" />
        </el-col>
        <el-col :span="10">
          <el-button type="info" @click="getMachineInfoLog(4)">查询夜间照明日志</el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
  <div style="float: right">
    <router-view></router-view>
  </div>
  <div>
    <el-table v-if="machineInfo.show === 1" :data="tableData" style="width: 100%" border>
      <el-table-column prop="state" label="机器状态" width="180" />
      <el-table-column prop="uploadTime" label="更改时间" />
    </el-table>
    <el-table v-if="machineInfo.show === 2" :data="tableData" style="width: 100%" border>
      <el-table-column prop="cellVoltage" label="电池电压" width="180" />
      <el-table-column prop="uploadTime" label="更改时间" />
    </el-table>
    <el-table v-if="machineInfo.show === 3" :data="tableData" style="width: 100%" border>
      <el-table-column prop="speed" label="机器速度" width="180" />
      <el-table-column prop="uploadTime" label="更改时间" />
    </el-table>
    <el-table v-if="machineInfo.show === 4" :data="tableData" style="width: 100%" border>
      <el-table-column prop="nightLight" label="夜间照明" width="180" />
      <el-table-column prop="uploadTime" label="更改时间" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { useStore } from 'vuex'
import axios from 'axios'
import router from '@/router'

const store = useStore()
const machineInfo = reactive({
  id: '',
  state: 0,
  localIp: '',
  localPort: 0,
  cellVoltage: 0,
  cellRfid: '',
  speed: 0,
  nightLight: 0,
  show: 0
})

let tableData: never[] = []

const onSurface = () => {
  router.push({
    path: 'info',
    query: { data: JSON.stringify(tableData) }
  })
}

const getMachineInfoLog = (num: number) => {
  if (num === 1) {
    axios.get('/machine/state/info/'.concat(machineInfo.id))
      .then((response: { data: { data: never[]; }; }) => {
        tableData = response.data.data
        machineInfo.show = 1
      })
  } else if (num === 2) {
    axios.get('/machine/cell/voltage/info/'.concat(machineInfo.id))
      .then((response: { data: { data: never[]; }; }) => {
        tableData = response.data.data
        machineInfo.show = 2
      })
  } else if (num === 3) {
    axios.get('/machine/speed/info/'.concat(machineInfo.id))
      .then((response) => {
        tableData = response.data.data
        machineInfo.show = 3
      })
  } else if (num === 4) {
    axios.get('/machine/night/light/info/'.concat(machineInfo.id))
      .then(({ data }) => {
        tableData = data.data
        machineInfo.show = 4
      })
  }
}

const create = () => {
  if (store.getters.getMachine) {
    machineInfo.id = store.getters.getMachine.id
    machineInfo.state = store.getters.getMachine.state
    machineInfo.localIp = store.getters.getMachine.localIp
    machineInfo.localPort = store.getters.getMachine.localPort
    machineInfo.cellVoltage = store.getters.getMachine.cellVoltage
    machineInfo.cellRfid = store.getters.getMachine.cellRfid
    machineInfo.speed = store.getters.getMachine.speed
    machineInfo.nightLight = store.getters.getMachine.nightLight
  }
}
create()

const onSwitch = () => {
  axios.put('/machine/switch', {
    id: machineInfo.id,
    state: machineInfo.state
  }).then(() => {
    machineInfo.state = 1
  })
}
</script>

<style>
  div{
    text-align: center;
  }
  .el-row {
    margin-bottom: 10px;
  }
</style>
